<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box" class="one two three" title="wh2107" data-index="31" onclick="" demo="missyou" style="color:pink">Box Box Box</div>

    <script>

        // 属性 attribute
        // getAttribute
        // setAttribute 
        var box = document.getElementById("box");
        console.log(box.getAttribute("class"))
        console.log(box.getAttribute("title"))
        console.log(box.getAttribute("data-index"))
        console.log(box.getAttribute("onclick"))
        console.log(box.getAttribute("demo"))
        console.log(box.getAttribute("style"))

        box.setAttribute("class","four")
        box.setAttribute("lgc","zkl")


        // 元素节点的属性
        // 元素节点  本质也是一个对象      
        // ele.xxx

        // innerHTML
        // innerText
        // textContent

        // className
        // classList  (add remove replace contains )
        // id
        // title
        // tagName
        

        // style
        // href
        // src

        // input
        // name 
        // value
        // placeholder
        // disabled
        // required
        // checked
        // selectedIndex
        // selectedOptions

        // clientWidth
        // clientHeight 
        // offsetLeft 

        console.log(box.getAttribute("classList"))

    </script>
</body>
</html>